
<template>
	<view>
		<view class='container'  v-if="info">
			<scroll-view scroll-y="true" :scroll-into-view="toComment" enable-back-to-top="ture">
				<view class="content">
					<jyf-parser class="product-detail" :html="info.member_register_protocol | formatRichText" ref="article"></jyf-parser>
				</view>
			</scroll-view>
		</view>
		<!-- <view class='container'  v-if="info&&type==2">
			<scroll-view scroll-y="true" :scroll-into-view="toComment" enable-back-to-top="ture">
				<view class="content">
					<jyf-parser class="product-detail" :html="info.member_privacy_protocol | formatRichText" ref="article"></jyf-parser>
				</view>
			</scroll-view>
		</view>
		<view class='container'  v-if="info&&type==3">
			<scroll-view scroll-y="true" :scroll-into-view="toComment" enable-back-to-top="ture">
				<view class="content">
					<jyf-parser class="product-detail" :html="info.content | formatRichText" ref="article"></jyf-parser>
				</view>
			</scroll-view>
		</view> -->
	</view>
</template>

<script>
	import jyfParser from "@/components/jyf-parser/jyf-parser.vue";
	import moment from '@/utils/moment';
	import helper from '@/utils/helper.js';
	import {
		Public
	} from '@/model/public.js';
	var publicModel = new Public();
	export default {
		components:{jyfParser},
		data() {
			return {
				info:{},
				type:1 ,
				id:''
			}
		},
		filters: {
			/**
			 * 处理富文本里的图片宽度自适应
			 * 1.去掉img标签里的style、width、height属性
			 * 2.img标签添加style属性：max-width:100%;height:auto
			 * 3.修改所有style里的width属性为max-width:100%
			 * 4.去掉<br/>标签
			 * @param html
			 * @returns {void|string|*}
			 */
			formatRichText(html) { //控制小程序中图片大小
				if (html) {
					let newContent = html.replace(/<img[^>]*>/gi, function(match, capture) {
						if (match.search(/style=/gi) == -1) {
							match = match.replace(/\<img/gi, '<img style=""');
						}
						return match;
					});
					newContent = newContent.replace(/style="/gi, '$& max-width:100% !important; ');
					// newContent = newContent.replace(/<br[^>]*\/>/gi, '');
					return newContent;
				} else {
					return '暂无详情'
				}
			},
			// 时间格式化
			time(val) {
				return moment(val * 1000).format('YYYY-MM-DD')
			}
		},
		onLoad(options) {
			this.type=options.type ? options.type : 1;
			
			this.id=options.id ? options.id : '';
			this.getConfig();
		},
		methods: {
			//配置信息
			getConfig: function() {
				var that = this;
				var param = {};
				var config = this.getStorageSync("config");
				publicModel.config(param, (data) => {
					that.info = data.data;
				});
			},
		}
	}
</script>

<style lang="scss">
	page{background-color: #fff !important;}
	.article{
		font-size: $uni-font-size-base;
		color: #222222;
		padding: 30rpx 2% 0 2%;
	}
	scroll-view {
		height: 100vh;
	}

	image {
		max-width: 100%;
	}

	.title {
		text-align: center;
		font-size: $uni-font-size-lg;
		line-height: 48rpx;
		padding: 20rpx 30rpx;
		border-bottom: 1px solid $uni-border-color;
		background-color: $uni-bg-color;
	}

	.content {
		padding: 38rpx 30rpx 80rpx;
		// background-color: $uni-bg-color;
		font-size: $uni-font-size-lg;
		box-sizing: border-box;
		overflow: hidden
	}

	.wxParse-p {
		overflow: hidden
	}

	.box {
		padding: 20rpx 30rpx;
		background-color: $uni-bg-color;
	}

	.box text {
		font-size: $uni-font-size-sm;
		color: $uni-text-color-grey;
		margin-right: 30rpx;
	}

	.comment {
		background-color: $uni-bg-color;
		margin-top: 20rpx;
		padding-bottom: 50rpx;
		padding-top: 20rpx;
	}

	.comment .com-title {
		font-size: $uni-font-size-sm;
		font-weight: bold;
		border-left: 6rpx solid #ff4444;
		padding-left: 20rpx;
		margin-left: 30rpx;
		margin-bottom: 20rpx;
	}

	.list-item {
		display: flex;
		align-items: flex-start;
		padding: 20rpx 30rpx;
		border-bottom: 1px solid #f9f9f9;
	}

	.list-item .hd image {
		width: 60rpx;
		height: 60rpx;
		border-radius: $uni-border-radius-circle;
		margin-right: 20rpx;
	}

	.list-item .bd {
		display: flex;
		justify-content: space-between;
		flex-direction: column;
		min-height: 120rpx;
	}

	.list-item .bd .name {
		font-size: $uni-font-size-sm;
		color: #1a3bdf;
		overflow: hidden;
		text-overflow: hidden;
		line-height: 36rpx;
		margin-bottom: 10rpx;
	}

	.list-item .bd .des {
		font-size: $uni-font-size-sm;
		line-height: 36rpx;
	}

	.list-item .bd .time {
		font-size: 20rpx;
		color: $uni-text-color-grey;
		margin-top: 10rpx;
	}

	.btm {
		position: fixed;
		bottom: 0;
		left: 0;
		display: flex;
		justify-content: space-around;
		align-items: center;
		background-color: $uni-bg-color;
		width: 100%;
		padding: 20rpx 0;
	}

	.btm .pinglun {
		border: 1px solid #efefef;
		border-radius: 20rpx;
		padding: 8rpx 20rpx;
		position: relative;
		background-color: #f9f9f9;
	}

	.icon-iconfontbianji {
		position: absolute;
		top: 12rpx;
	}

	.btm .pinglun input {
		font-size: $uni-font-size-sm;
		width: 420rpx !important;
		text-indent: 40rpx;
	}

	.btm .shouye,
	.btm .zan,
	.btm .cang {
		width: 100rpx;
		text-align: center
	}

	.btm .zan {
		margin-top: 10rpx;
		margin-bottom: 4rpx;

	}

	.icon-iconfontxingxing {
		font-size: 36rpx;
		margin-bottom: 2rpx;
	}

	.icon-shouye {
		font-size: 36rpx;
		margin-bottom: 2rpx;
	}

	.active {
		color: #ff4444
	}

	.mask {
		position: fixed;
		z-index: 1000;
		top: 0;
		right: 0;
		left: 0;
		bottom: 0;
		background: rgba(0, 0, 0, 0.6);
	}

	.comment-box {
		position: fixed;
		z-index: 5000;
		width: 750rpx;
		bottom: 0;
		left: 0;
		background-color: $uni-bg-color;
		padding: 0 30rpx;
	}

	.comment-box input {
		width: 100%;
		font-size: $uni-font-size-lg;
		margin: 30rpx 0;
	}

	.no-comment {
		padding: 100rpx 0;
		text-align: center;
		font-size: $uni-font-size-lg;
		color: $uni-text-color-grey;
	}

	.more {
		text-align: center;
		margin-top: 50rpx;
	}

	.more text {
		font-size: $uni-font-size-sm;
		border: 2rpx solid #e6e6e6;
		border-radius: 10rpx;
		padding: 10rpx 20rpx;

	}

	/*底部信息  */
	.foot-box {
		width: 100%;
		padding: 10rpx 0;
		background-color: #fff;
		color: #afadad;
		text-align: center;
		font-size: 24rpx;
		position: fixed;
		bottom: 0;
		border-top: 1xp solid #f9f9f9;
		display: flex;
		justify-content: center;
	}

	.foot-item {
		width: 25%;
	}

	.foot-box image {
		width: 70rpx;
		padding: 10rpx;
		height: 70rpx;
	}

	.f-full {
		width: 100%;
		height: 120rpx;
		line-height: 120rpx;
	}
</style>
